<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:comps="http://java.sun.com/jsf/composite/components">
	
<h:panelGroup layout="block" styleClass="conteudo">
	
	<h:panelGrid columns="2" styleClass="blogGrid" 
		columnClasses="blogGridEsquerda blogGridVerticalAlignTop, blogGridDireita blogGridVerticalAlignTop">
	
		<h:panelGroup layout="block" id="posts">
		
			<h:form id="postsForm">
						
				<h:panelGroup id="postIndividual" layout="block" 
					style="min-height: 100px !important;"
					styleClass="postIndividualItem">
						
					<h:panelGroup layout="block" styleClass="postIndividualTitulo">
						<h:outputText value="#{BlogBean.post.titulo}" />
					</h:panelGroup>
						
					<h:panelGroup layout="block" styleClass="postIndividualAutorData">
						<h:outputText value="Por #{BlogBean.post.autor.nome}, em " />
						<h:outputText value="#{BlogBean.post.data}">
							<f:convertDateTime pattern="EEEE, dd 'de' MMMM 'de' yyyy" />
						</h:outputText>
						<h:outputText value=" - " />
						<h:outputFormat value="#{locale['blog.post.comentariosRealizados']}">
							<f:param value="#{BlogBean.comentarios.size()}" />
						</h:outputFormat>
					</h:panelGroup>
						
					<h:panelGroup layout="block" 
						styleClass="postIndividualTexto">
						<h:outputText value="#{BlogBean.post.conteudo}" escape="false" />	
					</h:panelGroup>	
					
					<h:panelGroup layout="block"
						styleClass="postIndividualRodape">
						
						<h:panelGrid columns="5">
							
							<h:outputText value="#{locale['blog.post.opcoes']}" />
								
							<p:spacer width="5" />
										
							<p:commandButton id="imprimirPostBtn" 
								style="font-size: 80% !important;"
								type="button"
								icon="ui-icon-print"
								value="#{locale['blog.post.imprimir']}">
								<p:printer target="postIndividual" />
							</p:commandButton>
							
						</h:panelGrid>

					</h:panelGroup>	
					
				</h:panelGroup>
			
			</h:form>
			
			<h:form id="comentarioForm" prependId="false">
			
				<h:panelGroup layout="block" styleClass="comentarPost">
				
					<h:panelGroup layout="block" style="text-align: center;"
						rendered="#{!SessaoBean.autenticado}"
						styleClass="comentarPrimeiro">
			
						<p:commandButton id="loginBtn"
							style="margin-top: 3px; font-size: 0.85em;"
							styleClass="ui-priority-primary"
							value="#{locale['blog.post.autenticarPrimeiro']}"
							type="button"
							onclick="loginDlg.show();" />										
											
					</h:panelGroup>				
				
					<h:panelGroup layout="block" 
						rendered="#{BlogBean.comentarios.size() lt 1}"
						styleClass="comentarPrimeiro">
						
						<h:outputText value="#{locale['blog.post.comentePrimeiro']}" />
					
					</h:panelGroup>
					
					<h:panelGroup layout="block">
						
						<h:panelGroup layout="block" styleClass="quantidadeComentarios">
							
							<h:panelGrid columns="3">
							
								<p:graphicImage
									library="images/sistema"
									name="blog-msg-icon.png" />
									
								<p:spacer width="5" />							
							
								<h:outputFormat value="#{locale['blog.post.comentariosRealizados']}">
									<f:param value="#{BlogBean.comentarios.size()}" />
								</h:outputFormat>
																					
							</h:panelGrid>
													
						</h:panelGroup>
					
						<h:panelGrid columns="2" rendered="#{SessaoBean.autenticado}">
						
							<p:graphicImage 
								value="../resources/images/usuarios/#{SessaoBean.usuarioAutenticado.avatar}" 
								width="35" height="35" />
							
							<h:panelGroup layout="block" styleClass="comentarioAutor">
								<h:outputText value="#{SessaoBean.usuarioAutenticado.nome}" />
							</h:panelGroup>
						
						</h:panelGrid>
				
						<h:panelGroup layout="block"
							rendered="#{SessaoBean.autenticado}" 
							styleClass="formularioComentario">
						
							<p:message for="texto" />

							<h:panelGrid columns="5">

								<p:inputTextarea id="texto"
									style="font-size: 1em !important;"
									required="true"
									counter="counterComentario" maxlength="1000"
									cols="73"
									rows="3"
									value="#{BlogBean.comentario.texto}"      
	    							counterTemplate="{0} caracteres restantes." 
							    	autoResize="true"/>  
								
								<p:spacer width="20" />
								
								<h:outputText id="counterComentario" />
								
								<p:spacer width="20" />
								
								<p:commandButton value="#{locale['blog.post.comentar.botao']}"
									update="comentarioForm comentariosList"
									action="#{BlogBean.comentar()}" />						

							</h:panelGrid>
							
						</h:panelGroup>
					
					</h:panelGroup>
				
				</h:panelGroup>
			
				<p:dataList id="comentariosList"
					styleClass="comentariosDataList" 
					var="comentario" value="#{BlogBean.comentarios}"
					paginator="true" paginatorAlwaysVisible="true" paginatorPosition="bottom"
					rows="10"
					type="none">
					
					<h:panelGroup layout="block" styleClass="comentarioGeralItem">
					
						<h:panelGrid columns="2">
						
							<p:graphicImage 
								value="../resources/images/usuarios/#{comentario.autor.avatar}" 
								width="35" height="35" />
								
							<h:panelGroup layout="block" styleClass="comentarioGeralAutorData">
								<h:outputText value="#{comentario.autor.nome}, " />
								<h:outputText value="#{comentario.data}">
									<f:convertDateTime pattern="'em' dd 'de' MMMM 'de' yyyy" />
								</h:outputText>					
							</h:panelGroup>							
						
						</h:panelGrid>					
						
						<h:panelGroup layout="block" 
							styleClass="comentarioGeralTexto">
							<h:outputText value="#{comentario.texto}" />	
						</h:panelGroup>	
					
					</h:panelGroup>					
				
				</p:dataList>
				
			</h:form>
		
		</h:panelGroup>
		
		<ui:include src="/resources/templates/blog/navegacaoBlogTemplate.xhtml" />
		
	</h:panelGrid>
		
</h:panelGroup>	

<p:dialog id="loginDialogo"
	widgetVar="loginDlg"
	resizable="false" closable="false" draggable="false"
	showEffect="slide" hideEffect="slide"
	modal="true">
			
	<f:facet name="header">
		<h:outputText value="#{locale['login.titulo']}" />
	</f:facet>
			
	<h:form id="loginForm">
	
		<h:panelGroup layout="block" styleClass="loginMessages">
			<p:messages id="loginMessages" />
		</h:panelGroup>
			
		<h:panelGrid columns="2">
			
			<p:outputLabel id="emailLoginLbl"
				for="emailLogin" value="#{locale['login.label.email']}" />
			<p:inputText id="emailLogin"
				required="true"
				maxlength="100"
				size="37"
				value="#{SessaoBean.email}" />
					
			<p:outputLabel id="senhaLoginLbl" 
				for="senhaLogin" value="#{locale['login.label.senha']}" />
			<p:password id="senhaLogin"
				required="true"
				inline="true"
				maxlength="32"
				size="37"
				value="#{SessaoBean.senha}">
				<f:validateLength minimum="8" maximum="32" />
			</p:password>
					
		</h:panelGrid>
			
		<p:spacer height="10" />
			
		<h:panelGroup layout="block" style="text-align: right; margin-top: 10px;">
				
			<p:commandButton id="autenticarBtn"
				styleClass="ui-priority-primary"
				update="loginForm"
				value="#{locale['login.botao.autenticar']}"
				action="#{SessaoBean.autenticar()}" />
			
			<p:commandButton id="cancelarAutenticacaoBtn"
				update="loginForm"
				value="#{locale['login.botao.cancelar']}"
				action="#{SessaoBean.cancelarAutenticacao()}"
				immediate="true" />
									
		</h:panelGroup>
		
	</h:form>
			
</p:dialog>

</ui:composition>